<template>
	<view class="car-card">
		<view class="car-card-content" v-for="(item,index) in carList" :key="index" @click='goCarDetail(item.car_id)'>
			<!-- 图片 -->
			<view class="img-content">
				<view class="img">
					<u-lazy-load :image="item.car_img + '!idx'"></u-lazy-load>
				</view>
			</view>
			<!-- 内容，标题价格 -->
			<view class="text-content">
				<view class="title">
					{{item.car_name}}
				</view>
        
        <!-- 标签tag，一口价，以租代售。。。等 -->
        <view class="tags-box">
          <u-tag :show="item.is_loans" text="一口价" mode="dark" size="mini" bg-color="#B5D55E" />
          <u-tag :show="item.rent_out" text="以租代售" mode="dark" size="mini" bg-color="#FFB865" />
          <u-tag :show="item.down_payment" text="一成首付" mode="dark" size="mini" bg-color="#FFD053" />
        </view>
        
				<view class="font-26 color-666 mt-10">
					指导价：{{item.factory_price}}/
          <i-icon icon="iconxiajiang" size="26rpx" color="#46BB36"></i-icon>
          {{item.discounts | handleDisCounts}}
				</view>
        
        <!-- 一口价显示 - 裸车价 -->
				<view v-if="item.is_loans">
          <text class="color-EB5C02 font-24">裸车价：</text>
          <text class="color-EB5C02 font-34">{{item.bus_price}}</text>
				</view>
        
        <!-- 以租代售和一成首付显示 - 首付月供 -->
        <view v-if="item.rent_out || item.down_payment" class="price">
          <text class="color-EB5C02 font-24">首付：</text>
          <text class="color-EB5C02 font-34">{{item.minimum_down_payment}}</text>
          
          <text class="color-EB5C02 mr-20">月供：</text>
          <text class="color-EB5C02 font-34">{{item.minimum_Monthly_payments}}</text>
        </view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
    name: 'card-car-item',
		props: {
			carList: {
				type: Array,
				default: function() {
					return [];
				},
			}
		},
		data() {
			return {
			}
		},
    
    filters: {
      handleDisCounts(val) {
        let f = val[0] === '-'
        return f ? val.slice(1) : val
      }
    },
    
		methods: {
			goCarDetail(e){
			  console.log(e)
			  uni.navigateTo({
				  url: '../../pages_carSource/productDetail/productDetail?goodsid='+e,
			  })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.car-card {
		margin-bottom: 30rpx;
	}

	.car-card-content {
		padding: 10rpx 0rpx;
		border-bottom: 2rpx solid #EEEEEE;
		background: #fff;
		border-radius: 5rpx;
		display: flex;

		.img-content {
			padding: 2%;
			flex-direction: column;

			.img {
				width: 220rpx;
				height: 147rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.text-content {
			padding: 2%;
			flex-direction: column;

			.title {
				color: #343434;
				font-weight: bold;
				font-size: 30rpx;
			}

			.sale-price {
				color: #EB5C02;
				font-size: 34rpx;
				padding: 6rpx 0px;
			}

			.price {
				color: #666666;
				font-size: 26rpx;
			}
		}

	}
</style>
